<template>
  <div>
    <van-nav-bar :title="title" fixed @click-left="gotoback" class="myhead">
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          theme="dark"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" size="16" class="icon" />
          </template>
        </van-popover>
      </template>
      <template #left v-if="back">
        <slot>
          <van-icon name="arrow-left" size="16" class="icon" />
        </slot>
      </template>
    </van-nav-bar>
    <van-action-sheet
      v-model="show"
      :actions="actionlist"
      cancel-text="取消"
      close-on-click-action
    />
  </div>
</template>

<script>
export default {
  name: "myhead",
  methods: {
    gotoback() {
      this.$router.go(-1);
    },
    onSelect(item) {
      console.log(item);
      if (item.value == "action") {
        this.show = true;
      } else {
        this.gotopage(item.value);
      }
    },
  },
  data() {
    return {
      show: false,
      actionlist: [{ name: "拍照" }, { name: "扫码" }, { name: "地理定位" }],
      showPopover: false,
      actions: [
        { text: "搜索", value: "search", icon: "search",disabled:this.search },
        { text: "登录", value: "login", icon: "smile-o",disabled:this.login },
        { text: "我的主页", value: "mine", icon: "user-circle-o",disabled:this.mine },
        { text: "操作", value: "action", icon: "setting-o" },
      ],
    };
  },
  props: {
    title: String,
    search:Boolean,
    login:Boolean,
    mine:Boolean,
    movie:Boolean,
    back: {
      type: Boolean,
      default: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.myhead{
  z-index:1000;
  .icon{
    font-size: 20px !important;
  }
}

</style>